<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/css/login.css">
    <link rel="stylesheet" href="/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/jquery.validate.min.js"></script>

    <style>
        .registration-form {
            max-width: 800px;
            margin: 0 auto;
        }
        .form-section {
            background: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .section-title {
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
            margin-bottom: 20px;
            color: #007bff;
        }
        .radio-group {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        .radio-item {
            min-width: 120px;
        }
    </style>
</head>
<body style="background-image: url('/images/R-C.png');
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;">
<div class="a registration-form">
    <h1 class="text-primary text-center mb-4">用户注册</h1>

    <form action="/apply/register" method="post">
        <!-- 基本信息部分 -->
        <div class="form-section">
            <h3 class="section-title">基本信息</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="loginn">ログイン別名</label>
                        <input type="text" id="loginn" name="loginn" class="form-control title" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="disn">表示名</label>
                        <input type="text" id="disn" name="disn" class="form-control title" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="pass">パスワード</label>
                        <input type="password" id="pass" name="pass" class="form-control title" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="mail">メールアドレス</label>
                        <input type="email" id="mail" name="mail" class="form-control title" required>
                    </div>
                </div>
            </div>
        </div>

        <!-- 认证信息部分 -->
        <div class="form-section">
            <h3 class="section-title">认证信息</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="token">トークン</label>
                        <input type="text" id="token" name="token" class="form-control title" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>認証サービス</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ser" id="ser1" value="1" checked>
                                    <label class="form-check-label" for="ser1">SMS</label>
                                </div>
                            </div>
                            <div class="radio-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ser" id="ser2" value="2">
                                    <label class="form-check-label" for="ser2">メール</label>
                                </div>
                            </div>
                            <div class="radio-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="ser" id="ser3" value="3">
                                    <label class="form-check-label" for="ser3">なし</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>区分</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="kbn" id="kbn1" value="1" checked>
                                    <label class="form-check-label" for="kbn1">会员</label>
                                </div>
                            </div>
                            <div class="radio-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="kbn" id="kbn2" value="2">
                                    <label class="form-check-label" for="kbn2">社员</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="form-group text-center mt-4">
            <button type="submit" class="btn btn-info btn-lg mr-3" style="width: 40%;">注册</button>
            <button type="button" class="btn btn-secondary btn-lg" style="width: 40%;" onclick="window.location.href='/tologin'">返回登录</button>
        </div>

        <p class="text-center"><span th:text="${msg}" style="color:red"></span></p>
    </form>
</div>
</body>
</html>
